<template>
    <div class="smrzform">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Form
            </div>
        </div>
        <!-- form表单 -->
        <div class="form">
            <van-cell-group>
                <van-field v-model="form.sfzqian.realName" label="RealName" placeholder="Please enter your first name"
                    clearable label-width="30%" :rules="rule"></van-field>
                <van-field v-model="form.cardupload.birthDay" label="Birthday" placeholder="Please enter birthday" clearable
                    label-width="30%" :rules="rule"></van-field>
                <van-field v-model="form.sfzhou.idCard" label="IdCard" placeholder="Please enter idCard" clearable
                    label-width="30%" :rules="rule"></van-field>
                <van-field v-model="form.sfzhou.pinCode" label="PinCode"
                    placeholder="Please enter your personal identification code" clearable label-width="30%"
                    :rules="rule"></van-field>
                <van-field v-model="form.cardupload.taxRegNumber" label="TaxRegNumber"
                    placeholder="Please enter the tax registration number" clearable label-width="30%"
                    :rules="rule"></van-field>
            </van-cell-group>
            <van-button type="primary" @click="submitForm" class="smzr-btn">Submit</van-button>
        </div>
    </div>
</template>

<script>
import { VanCellGroup, VanField, VanDatetimePicker, VanButton, Toast } from 'vant';
import { SubmitUserInfomation } from "../api/index.js";
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    data() {
        return {
            rule: [{
                required: true,
                message: '该项为必填项',
                trigger: 'blur',
            }]
        }
    },
    methods: {
        async submitForm() {
            const data = {
                model: {
                    idCard: this.form.sfzhou.idCard,
                    realName: this.form.sfzqian.realName,
                    taxRegNumber: this.form.cardupload.taxRegNumber,
                    birthday: this.form.cardupload.birthDay,
                    idCardImageFront: this.form.sfzqian.url,
                    idCardImageBack: this.form.sfzhou.url,
                    idCardImagePan: this.form.cardupload.url,

                }
            }
            console.log(data)
            const res = await SubmitUserInfomation(jiami(data))
            const result = jiemi(res.data)
            console.log('result', result)
            Toast('Submitted successfully')
            this.$router.push('/forms')
        },
    },
    computed: {
        form() {
            return this.$store.state.smrz.userdata
        }
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.smrzform {
    width: 100vw;
    height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (100/@a);

    .form {
        .smzr-btn {
            background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
            border-radius: (10/@a);
            margin-top: (30/@a);
            margin-left: (75/@a);
            width: (230/@a);
            height: (44/@a);
        }
    }

    //顶部
    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (170/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>